<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		  <!-- 1. 引入 Vue -->
		   <script src="https://unpkg.com/vue@3"></script>
		    <!-- 2. 引入 Axios -->
		    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		   <!-- 我们的 Vue 应用将挂载在这里 -->
		    <div id="app">
				{{message}}  <br/>
		         <button @click="fetchUserData">获取用户数据</button>
			</div>
			
	</body>
	
	<script>
		  // 3. 使用 Vue.createApp 创建应用实例
	      const { createApp } = Vue; // 从全局 Vue 对象中解构出 createApp
		 const app =createApp({
			 data(){
				 return {
					 "message":"vue>>>>>>>>>>>",
				 }
			 },
			 methods:{
				fetchUserData(){
					//使用全局的 axios 对象发起 GET 请求
					axios.get("http://localhost:9090/esp/get")
					.then(response =>  {
						console.log(response.data); // 直接就是解析好的JS对象 
						console.log(response.status);
					    console.log(response.request);
						console.log(response.data.name);
					  })
					.catch(function(e){
						console.log("报错了"+e);
					});
					 
				} ,
			 },
			  
			 
		 });
		 
		 app.mount("#app");
		 
		 
		 /***
		 .then(): 这个方法属于 Promise 对象。当一个 Promise（比如 axios.get() 返回的 Promise）成功完成时，
		 传递给 .then() 的函数就会被调用。
		 response => { ... }: 因此，这个箭头函数就是一个成功回调函数。只有当 axios.get() 成功从服务器获取到数据后，
		 这个函数体内的代码才会执行。
		  response => { ... }：箭头函数
		 箭头函数是 ES6 引入的一种更简洁的函数写法。
		 它等同于下面的传统函数写法：
		 function(response) {
		   console.log(response.data);
		   console.log(response.data.name);
		 }
		 使用箭头函数可以让代码看起来更简洁，尤其是在这种作为回调函数的场景下。
		 response：Axios 的响应对象
		 当 axios.get() 请求成功时，Axios 会把从服务器接收到的所有信息包装成一个响应对象 (Response Object)，
		 并把这个对象作为参数传递给你的成功回调函数。我们在这里用 response 这个变量来接收它。
		 这个 response 对象包含了丰富的信息，而不仅仅是服务器返回的数据。
		 属性	类型	描述
		 data	any	响应体。这是服务器返回的实际数据。如果服务器返回的是 JSON 字符串，Axios 会自动将其解析为 JavaScript 对象。
		 status	number	HTTP 状态码。例如 200 (OK), 404 (Not Found)。
		 statusText	string	HTTP 状态信息。例如 'OK', 'Not Found'。
		 headers	object	响应头。一个包含了服务器返回的 HTTP 头信息的对象。
		 config	object	请求配置。你在发起请求时传入的所有配置信息。
		 request	object	请求实例。生成此响应的 XMLHttpRequest 实例
		 ***/
		
	</script>
</html>
